import React, { Component } from 'react'
import './index.scss'
import { Layout, Menu, Breadcrumb } from 'antd'
import {
    DesktopOutlined,
    PieCharOutlined,
    FileOutlined,
    UserOutlined
} from '@ant-design/icons'
import MyHead from './myHead'
import { request } from '../../api'
import mobxdata from '../../mobx/data'
import MyMenu from './mymenu'
import { Redirect, Route, Switch } from 'react-router'
import Lazyload from '../../utils/lazyload'
const { Header, Content, Footer, Sider } = Layout
export default class MainCom extends Component {
    componentDidMount() {
        request.getuserinfo()
            .then(res => {
                if (res.code == 200) {
                    mobxdata.changeuserinfo(res.result)//存储到全局变量
                } else if (res.code == "3000") {
                    this.props.history.push('./login')
                }
            })
    }
    render() {
        return (
            <div className='main'>
                <Layout style={{ display: 'flex', width: '100%', height: '100%', minHeight: '100vh', flexDirection: 'row' }}>
                    <div style={{ width: '200px' }}>
                        <MyMenu history={this.props.history}></MyMenu>
                    </div>
                    <Layout style={{ flex: 1, height: '100vh' }}>
                        <div style={{ padding: '0 20px' }}>
                            <MyHead history={this.props.history}></MyHead>
                        </div>
                        <Layout style={{ padding: '0 20px 0px' }}>
                            <Breadcrumb style={{ margin: '16px 0' }}>
                                <Breadcrumb.Item>Home</Breadcrumb.Item>
                                <Breadcrumb.Item>User</Breadcrumb.Item>
                            </Breadcrumb>
                            <Content style={{ padding: 20, minHeight: 360, margin: 0, backgroundColor: '#fff', overflow: 'auto', height: '100%' }}>
                                <Switch>
                                    <Route path="/main" exact render={() => (<Redirect to="/main/home" />)} />
                                    <Route path="/main/home" exact component={Lazyload(() => import('../home'))} />
                                    <Route path="/main/user"
                                        component={
                                            () => (
                                                <Switch>
                                                    <Route path="/main/user" exact render={() => (<Redirect to="/main/user/list" />)} />
                                                    <Route path="/main/user/list" exact component={Lazyload(() => import('../user'))} />
                                                    <Route path="/main/user/fenxi" exact component={Lazyload(() => import('../user/fenxi'))} />
                                                </Switch>
                                            )
                                        }
                                    />
                                    <Route path="/main/advise"
                                        component={
                                            () => (
                                                <Switch>
                                                    <Route path="/main/advise" exact render={() => (<Redirect to="/main/advise/list" />)} />
                                                    <Route path="/main/advise/list" exact component={Lazyload(() => import('../advise/list'))} />
                                                    <Route path="/main/advise/fenxi" exact component={Lazyload(() => import('../advise/fenxi'))} />
                                                </Switch>
                                            )
                                        }
                                    />
                                    <Route path="/main/mine" exact component={Lazyload(() => import('../mine'))} />
                                    <Route render={() => (<Redirect to="/main/user" />)} />
                                </Switch>
                            </Content>
                            <Footer style={{ textAlign: 'center', padding: "0 10px" }}>System ©2021 Created By Mr.Y</Footer>
                        </Layout>
                    </Layout>
                </Layout>
            </div>
        )
    }
}
